<template>
  <div class="w-full">
    <el-radio-group v-model="dataScope">
      <el-radio :value="0">全部数据</el-radio>
      <el-radio :value="1">本人数据</el-radio>
      <el-radio :value="2">自定义数据</el-radio>
      <el-radio :value="3">本部门数据</el-radio>
      <el-radio :value="4">本部门及以下数据</el-radio>
    </el-radio-group>

    <div v-if="dataScope === 2" class="border border-br-light rounded pt-2 pl-2 pb-3 pr-2 box-border">
      <div class="mb-2 flex justify-between">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="setMenuCheck" style="font-size: 16px">
          公司部门权限
        </el-checkbox>
        <div class="select-none">
          <el-link type="primary" @click="setDeptOpenOrClose(true)">展开</el-link>
          <span class="text-sm align-middle ml-0.5 mr-0.5">/</span>
          <el-link type="info" @click="setDeptOpenOrClose(false)">折叠</el-link>
        </div>
      </div>
      <el-tree
        class="pl-2"
        ref="treeRef"
        :data="deptTreeData"
        show-checkbox
        default-expand-all
        :default-checked-keys="role.deptIds"
        node-key="id"
        highlight-current
        :render-after-expand="false"
        :props="{ label: 'deptName', children: 'children' }"
        @check-change="handleNodeClick"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Role } from "@/api/interface";
import { ElTree } from "element-plus";
import { useComponentRef } from "@/hooks/useComponentRef";
import { getDeptTree } from "@/api/modules/dept";

defineOptions({
  name: "DataPermission"
});

const props = defineProps<{
  role: Role.IRole;
}>();

const isIndeterminate = ref(false);
const deptTreeData = ref([]) as any;
const checkAll = ref(false);
const treeRef = useComponentRef(ElTree);
const dataScope = ref(undefined);

const setMenuCheck = () => {
  const ids = extractIds(deptTreeData.value);
  treeRef.value?.setCheckedKeys(checkAll.value ? ids : []);
  isIndeterminate.value = false;
};

const setDeptOpenOrClose = expend => {
  const ids = extractIds(deptTreeData.value);
  ids.forEach((id: any) => {
    if (treeRef.value?.store.nodesMap[id]) {
      treeRef.value.store.nodesMap[id].expanded = expend;
    }
  });
};

const handleNodeClick = () => {
  const ids = extractIds(deptTreeData.value);
  const checkDeptLen = (treeRef.value?.getCheckedKeys() as number[]).length || 0;
  isIndeterminate.value = checkDeptLen > 0 && checkDeptLen < ids.length;
  checkAll.value = checkDeptLen === ids.length;
};

const getDeptTreeList = async () => {
  const { data } = await getDeptTree();
  deptTreeData.value = data;
  const ids = extractIds(data);
  const roleDeptLen = props.role.deptIds?.length || 0;
  checkAll.value = roleDeptLen === ids.length;

  if (props.role.menus) {
    isIndeterminate.value = roleDeptLen > 0 && roleDeptLen < ids.length;
  }
};

const extractIds = (data: any[]): number[] => {
  const ids: number[] = [];
  data.forEach((item: any) => {
    ids.push(item.id);
    if (item.children && item.children.length > 0) {
      ids.push(...extractIds(item.children));
    }
  });
  return ids;
};

const getCheckedKeys = () => {
  return treeRef.value?.getCheckedKeys() as number[];
};

onMounted(() => {
  getDeptTreeList();
});

defineExpose({
  getCheckedKeys
});
</script>

<style scoped lang="scss"></style>
